// 这里只书写首页的代码
body {
  background-color: #f0f0f0;
}
// less 嵌套书写
.banner {
  width: 100vw;
  height: 42.66667vw;
  img {
    width: 100vw;
    height: inherit;
  }
}

// 2.0 乐园活动
.activity {
  .activity-head {
    height: 10.66667vw;
    padding-left: 4vw;
    font-size: 3.73333vw;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .activity-body {
    // background-color: pink;
    .activity-item {
      height: 66.66667vw;
      margin-bottom: 2.66667vw;
      position: relative;
      background-color: #fff;
      // 手指按下的状态，在移动端可以用 :active 表示，移动端项目不用 :hover 悬停
      &:active {
        .activity-item-mask {
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: rgba(0, 0, 0, 0.3);
          left: 0;
          top: 0;
        }
      }
      // 活动状态
      .activity-item-state {
        z-index: 1;
        width: 18.13333vw;
        height: 7.73333vw;
        background-image: url(../images/status_active.png);
        // 注意：需通过 background-size 修改背景图大小，适配所有屏幕
        background-size: 18.13333vw auto;
        font-size: 3.2vw;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 4vw;
        top: -1.06667vw;
      }
      // 活动状态2: 已截止
      .activity-item-state-abort {
        background-image: url(../images/status_default.png);
      }
      .activity-item-collect {
        position: absolute;
        right: 4.8vw;
        top: 4vw;
        border-radius: 50%;
        i {
          font-size: 8vw;
        }
      }
      .activity-item-img {
        width: 100vw;
        height: 42.66667vw;
      }
      .activity-item-detail {
        font-size: 4vw;
        display: flex;
        justify-content: space-between;
        padding: 2.66667vw 4vw;
        h3 {
          font-weight: normal;
          flex: 1;
        }
        span {
          color: #fe6249;
          margin-left: 8vw;
        }
      }
      .activity-item-info {
        color: #b4b4b4;
        font-size: 2.93333vw;
        padding: 1.33333vw 4vw;
        span {
          margin-right: 4vw;
        }
      }
    }
  }
}

body {
  // 🧨注意1：防止底部导航栏遮挡内容
  // 🧨注意2：env(safe-area-inset-bottom) 底部安全区域固定写法
  // 🧨注意3：calc 做加法运算，两边至少留一个空格
  // padding-bottom: 13.33333vw;
  padding-bottom: calc(13.33333vw + env(safe-area-inset-bottom));
}
// 3.0 底部导航栏
.tabBar {
  width: 100vw;
  height: 13.33333vw;
  background-color: #feca49;
  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
  display: flex;
  // 默认状态文字是金色的
  .tabBar-item {
    color: #d78b09;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i {
      font-size: 6.4vw;
    }
    span {
      font-size: 2.93333vw;
      margin-top: 1.33333vw;
    }
  }
  // 选中状态文字是白色的
  .tabBar-item-active {
    color: #fff;
  }
}
